<!-- JsonEditor.vue -->
<template>
  <div class="container">
    <div ref="jsonEditorContainer" class="json-edit"></div>
    <div class="btn-box" v-if="show">
      <!-- <el-button @click="getJson" color="#626aef" size="large" type="primary">
        获取 JSON
      </el-button> -->
      <el-button @click="saveJson" color="#626aef" size="large" type="primary">
        保存 JSON
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue';
// json编辑器
import JSONEditor from 'jsoneditor';
import 'jsoneditor/dist/jsoneditor.css'; // 引入 jsoneditor 的样式
import common from '@/modules'; // 默认配置项
const { defaultJsonEditorOptions } = common;
const props = defineProps({
  options: {
    type: Object,
    default: () => ({}), // 父组件传递的配置项，默认为空对象
  },
  languageDataList: {
    type: [Object, String],
    default: () => ({}), // 父组件传递的 JSON 数据，默认为空对象
  },
  show: {
    type: Boolean,
    default: true,
  },
});
// 定义 emits 事件以便父组件监听
const emit = defineEmits(['save-json']); //'get-json',

// 用于挂载 JSONEditor 实例的容器
const jsonEditorContainer = ref(null);
let editor = null; // 定义 editor 变量来存储 JSONEditor 实例
// 当组件挂载时初始化 JSONEditor
onMounted(() => {
  // 合并父组件传递的配置和默认配置
  const opt = {
    ...defaultJsonEditorOptions, // 使用默认配置项
    schema: defaultJsonEditorOptions.schema, // 使用只读的 schema 配置
    ...props.options, // 覆盖父组件传递的配置项
  };

  editor = new JSONEditor(jsonEditorContainer.value, opt);
  editor.set(props.languageDataList || {}); // 使用父组件传递的 JSON 数据作为默认值
});

// 保存 JSON 数据
const saveJson = () => {
  try {
    const json = editor.get(); // 获取 JSON 数据
    emit('save-json', json); // 触发保存 JSON 的事件并传递数据
  } catch (error) {
    console.log('error:', error);
  }
};
// 监听 defaultJson 的变化并更新 JSONEditor 的内容
watch(
  () => props.languageDataList, // 监听 defaultJson 的变化
  (newJson) => {
    if (editor && newJson) {
      // editor.update(newJson || {}); // 更新编辑器内容
      editor.set(newJson || {}); // 使用父组件传递的 JSON 数据作为默认值
    }
  },
  { deep: true, immediate: true } // 深度监听和立即执行
);

defineExpose({
  saveJson,
});
</script>

<style scoped lang="scss">
.container {
  position: relative;
  height: 100%;
  .btn-box {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}
.json-edit {
  height: 100%;
}
</style>
